
<nz-layout class="employee-layout">
    <nz-sider class="dept-sider" [nzWidth]="240" nzTheme="light">
        <app-employee-dept (selectedDept)="onDeptSelect($event)"></app-employee-dept>
    </nz-sider>

    <nz-layout>
        <nz-content>
            <form nz-form [formGroup]="searchForm" class="ant-advanced-search-form">
                <div nz-row [nzGutter]="24" style="white-space: nowrap">
                    <div nz-col [nzSpan]="6">
                        <div nz-row>
                            <nz-form-label nzFor="username">用户名称</nz-form-label>
                            <nz-form-control>
                                <input nz-input formControlName="username" placeholder="用户名称"/>
                                <div *ngIf="submitted && fm['username'].invalid">
                                    <div *ngIf="fm['username'].errors?.['minlength']">名称长度不小于1</div>
                                    <div *ngIf="fm['username'].errors?.['maxlength']">名称长度不超过20</div>
                                </div>
                            </nz-form-control>
                        </div>
                    </div>
                    <div nz-col [nzSpan]="6">
                        <div nz-row>
                            <nz-form-label nzFor="phoneNumber">电话号码</nz-form-label>
                            <nz-form-control>
                                <input nz-input formControlName="phoneNumber" placeholder="电话号码"/>
                                <div *ngIf="submitted && fm['phoneNumber'].invalid">
                                    <div *ngIf="fm['phoneNumber'].errors?.['minlength']">请输入正确的电话号码</div>
                                    <div *ngIf="fm['phoneNumber'].errors?.['maxlength']">请输入正确的电话号码</div>
                                </div>
                            </nz-form-control>
                        </div>
                    </div>
                    <div nz-col [nzSpan]="6">
                        <div nz-row>
                            <nz-form-label nzFor="enabled">状态</nz-form-label>
                            <nz-form-control>
                                <nz-select class="role-enabled" name="enabled" formControlName="enabled" [nzAllowClear]="true">
                                    <nz-option nzValue="true" nzLabel="正常"></nz-option>
                                    <nz-option nzValue="false" nzLabel="停用"></nz-option>
                                </nz-select>
                            </nz-form-control>
                        </div>
                    </div>
            
                    <div nz-col [nzSpan]="6">
                        <div nz-row nzJustify="end">
                            <nz-col>
                                <app-search-button [search]="true" (searchEvent)="onSearch()" [reset]="true" 
                                (resetEvent)="onReset()"
                                [create]="true" (createEvent)="onCreate(editModalTitle, editModalContent)"></app-search-button>
                            </nz-col>
                        </div>
                    </div>
                </div>
            </form>
            
            <div nz-row style="margin-top: 4px; white-space: nowrap;">
                <nz-table #expandTable nzShowPagination [nzData]="users" 
                    nzTableLayout="fixed" [nzFrontPagination]="false"
                    [nzPageIndex]="pageIndex" [nzPageSize]="pageSize" [nzTotal]="total" 
                    (nzQueryParams)="onPageParamChange($event)">
                    <thead>
                        <tr>
                            <th>用户ID</th>
                            <th>用户名</th>
                            <th>昵称</th>
                            <th>部门</th>
                            <th>手机</th>
                            <th>操作</th>
                        </tr>
                    </thead>
            
                    <tbody>
                        <tr *ngFor="let user of users">
                            <td>{{user.userId}}</td>
                            <td style="color: green;">{{user.username}}</td>
                            <td>{{user.nickName}}</td>
                            <td>{{user.deptName}}</td>
                            <td>{{user.phoneNumber}}</td>
                            <td [nzEllipsis]="true" style="overflow: hidden;" nzRight>
                                <button class="action-button" nz-button (click)="onDetail(detailTitle, detailContent, user)">详情</button>
                                <button class="action-button" nz-button (click)="onUpdate(editModalTitle, editModalContent, user)">编辑</button>
                                <button class="action-button" nz-button nz-dropdown [nzDropdownMenu]="more_action">
                                    更多
                                    <span nz-icon nzType="down"></span>
                                  </button>
                                <nz-dropdown-menu  #more_action="nzDropdownMenu">
                                    <ul nz-menu nzSelectable style="min-width: 80px;  text-align: center;">
                                        <li>
                                            <button  class="dropdown-button" nz-button (click)="onDelete(user.userId)">删除</button>
                                        </li>
                                        <li>
                                            <button nz-button class="dropdown-button"  (click)="onResetPassword(resetModalTitle, resetModalContent, user)">重置密码</button>
                                        </li>
                                        <li>
                                            <button nz-button class="dropdown-button" (click)="onAssignRoles(assignModalTitle, assignModalContent, user)">用户权限</button>
                                        </li>
                                    </ul>
                                </nz-dropdown-menu>
                            </td>
                        </tr>
                    </tbody>
                </nz-table>
            </div>
        </nz-content>
    </nz-layout>
</nz-layout>

<nz-modal class="edit-modal">
    <ng-template #editModalTitle>
        {{editTitle}}
        @if (userName != null) {
            <span style="color: rgb(55, 134, 90);">{{userName}}</span>
        }
    </ng-template>

    <ng-template #editModalContent>
        <app-add-employee (addEmployeeEvent)="onAddEmployeeEvent($event)" 
        [modeSubject]="modeSubject"></app-add-employee>
    </ng-template>
</nz-modal>

<nz-modal class="detail-modal">
    <ng-template #detailTitle>员工详情:<span style="color: rgb(55, 134, 90);">{{userName}}</span></ng-template>

    <ng-template #detailContent>
        <app-employee-detail (detailEvent)="onDetailEvent($event)" [userSubject]="userSubject"></app-employee-detail>
    </ng-template>
</nz-modal>

<nz-modal class="reset-modal">
    <ng-template #resetModalTitle>{{editTitle}}</ng-template>

    <ng-template #resetModalContent>
       <app-reset-password [userSubject]="resetSubject" (resetEvent)="onResetEvent($event)"></app-reset-password>
    </ng-template>
</nz-modal>

<nz-modal class="assign-modal">
    <ng-template #assignModalTitle>{{editTitle}}</ng-template>

    <ng-template #assignModalContent>
       <app-assign-roles [assignRoleSubject]="assignRoleSubject" (assignRoleEvent)="onAssignRoleEvent($event)"></app-assign-roles>
    </ng-template>
</nz-modal>
